<html window-frame="transparent" state="hidden">
<head>
  <title>Glassy window</title>
  <style>
    html 
    { 
      font:system;
      background-color:transparent; 
      overflow:hidden;
      padding:0;
    }
    
    body 
    {
      background-color:rgba(0,0,0,0.6); 
      background-clip: padding-box;
      padding:8dip; margin:0;
      border-left:1dip solid rgba(150,150,150,0.25); 
      transform: translate(100%,0);
    }
    
    body[state="shown"] {
      transform: translate(0%,0);
      transition: transform(expo-out,300ms);
    }
    
    section {
      flow: grid(1 2,
                 3 3,
                 4 5);
      border-spacing: 8dip;
    }
    
    brick { 
      display:block;
      width:*; 
      height: 100dip; 
      background: gold;
    }
   
    
  </style>
  <script type="text/tiscript">

    var body = $(body);  
  
    view.expand = function() {
      body.animate(function(p) { if( p >= 0.25 && !view.windowBlurbehind ) view.windowBlurbehind = #auto; }, 
                   300ms);
      body.attributes["state"] = "shown";
      view.state = View.WINDOW_SHOWN;
    }

    view.collapse = function() {
      body.animate(function(p) { if( p >= 0.75 && view.windowBlurbehind ) view.windowBlurbehind = undefined; }, 
                   function() { view.state = View.WINDOW_HIDDEN; },
                   300ms);
      body.attributes["state"] = "hidden";
    }
  
    self.on("click","#hide", view.collapse);
    
    </script>
</head>
<body>
  <button #hide>&raquo;</button>
  <section>
    <brick>1</brick>
    <brick>2</brick>
    <brick>3</brick>
  </section>
</body>
</html>